<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-hello-text">
				<button @click="add" >新增课时</button>
			</view>

			<view class="uni-title uni-common-mt">
				
				<text>\n自闭课程表</text>
			</view>
			<view class="uni-flex uni-row">
				<view class="flex-item uni-bg-red">周一</view>
				<view class="flex-item uni-bg-green">周二</view>
				<view class="flex-item uni-bg-blue">周三</view>
				<view class="flex-item uni-bg-red">周四</view>
				<view class="flex-item uni-bg-green">周五</view>
				<view class="flex-item uni-bg-blue">周六</view>
				<view class="flex-item uni-bg-red">周日</view>
			</view>
			
			<view class="uni-flex uni-row">
<!-- 				<view id='line-1' class="flex-item">
					<view id="1" class="flex-item flex-item-V " :style="{'background-color':grey}" ></view>
					<view id="2" class="flex-item flex-item-V uni-bg-green">B</view>
					<view id="3" class="flex-item flex-item-V uni-bg-whil">A</view>
					<view id="4" class="flex-item flex-item-V uni-bg-green">B</view>
					<view id="5" class="flex-item flex-item-V uni-bg-whil">A</view>
					<view id="6" class="flex-item flex-item-V uni-bg-green">B</view>
					<view id="7" class="flex-item flex-item-V uni-bg-whil">A</view>
					<view id="8" class="flex-item flex-item-V uni-bg-green">B</view>
					<view id="9" class="flex-item flex-item-V uni-bg-whil">A</view>
					<view id="10" class="flex-item flex-item-V uni-bg-green">B</view>
					<view id="11" class="flex-item flex-item-V uni-bg-whil">A</view>
					<view id="12" class="flex-item flex-item-V uni-bg-green">B</view>
					<view id="13" class="flex-item flex-item-V uni-bg-whil">A</view>
				</view> -->
				<view  class="flex-item" v-for="(row,index) in mock" :key="index">
					<!-- 列 -->
					<view id=row.id >
						<view  v-for="(item,i) in row" :key="i">
							<view id=mock[index][i].realid class="flex-item flex-item-V " :style="{'background-color':mock[index][i].color}" >{{mock[index][i].text}}</view>
						</view>
						
					</view>
				</view>



				
			</view>

<!-- 			<view class="uni-title uni-common-mt">
				<text>\n纵向布局</text>
			</view>
			<view class="uni-flex uni-column">
				<view class="flex-item flex-item-V uni-bg-red">A</view>
				<view class="flex-item flex-item-V uni-bg-green">B</view>
				<view class="flex-item flex-item-V uni-bg-blue">C</view>
			</view>

			<view class="uni-title uni-common-mt"> -->

		
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				classer:[
				],
				core:{
					"realid":"",
					"class-id":0,
					"color":"#999999",
					"text":"",
				},
				mock:[
    [
        {
            "realid": "0-0",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-1",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-2",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-3",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-4",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-5",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-6",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-7",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-8",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-9",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-10",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-11",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "0-12",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        }
    ],
    [
        {
            "realid": "1-0",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-1",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-2",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-3",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-4",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-5",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-6",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-7",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-8",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-9",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-10",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-11",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "1-12",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        }
    ],
    [
        {
            "realid": "2-0",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-1",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-2",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-3",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-4",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-5",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-6",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-7",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-8",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-9",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-10",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-11",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "2-12",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        }
    ],
    [
        {
            "realid": "3-0",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-1",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-2",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-3",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-4",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-5",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-6",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-7",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-8",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-9",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-10",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-11",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "3-12",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        }
    ],
    [
        {
            "realid": "4-0",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-1",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-2",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-3",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-4",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-5",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-6",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-7",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-8",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-9",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-10",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-11",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "4-12",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        }
    ],
    [
        {
            "realid": "5-0",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-1",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-2",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-3",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-4",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-5",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-6",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-7",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-8",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-9",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-10",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-11",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "5-12",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        }
    ],
    [
        {
            "realid": "6-0",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-1",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-2",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-3",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-4",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-5",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-6",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-7",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-8",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-9",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-10",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-11",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        },
        {
            "realid": "6-12",
            "class-id": 0,
            "color": "#ccffff",
            "text": ""
        }
    ]
],
			}
		},
		
		methods: {
			onLoad() {
				// var that = this;
				// this.$data.mock[0][1].color = that.SelectColor("red");
				// this.$data.mock[0][0].color = that.SelectColor("red");
				// this.$data.mock[0][2].color = that.SelectColor("red");
				// this.$data.mock[0][1].text = "English";
				
				
				this.DrawClass();
					},
			
			DrawClass(){
				this.$data.classer = getApp().globalData.classer;
				console.log(this.$data.classer)
				var that = this;
			for(var i = 0 ; i < this.$data.classer.length;i++){
				for(var ii = 0 ; ii < this.$data.mock.length;ii++){
						for(var iii = 0 ; iii < this.$data.mock[ii].length;iii++){
							if(this.$data.classer[i].start==this.$data.mock[ii][iii].realid){
								var temp = this.$data.mock[ii][iii].realid.split("-");
								var start = temp[1];
									
								for(var iiii = 0 ; iiii<this.$data.classer[i].num ; iiii++ ){
									this.$data.mock[ii][iii+iiii].color = this.$data.classer[i].color;
										
									if(iiii==1){
										this.$data.mock[ii][iii+iiii].text = this.$data.classer[i].name;
									}
								}
								
							}
						}
				}
			}
			},
					
			SelectColor(color) {
				switch (color){
				case "grey":
					return "#669999"; //grey
				case "red":
					return "#ff5739";//red
				case "blue":
					return "#9bbeff";//blue
				default:
					return "#9999ff";//blue
				}
					},
			RamColor(){
					var ram = Math.floor(Math.random() * 3 + 1);
						
					switch (ram){
					case 1:
						return "#669999"; //grey
					case 2:
						return "#ff5739";//red
					default:
						return "#9bbeff";//blue
					}
				},
				MockInit(){
					var that = this;
					var arr= [] ;
					for(var i = 0 ; i<7 ; i++){
						var raw = [];
						for(var ii = 0 ; ii<13 ; ii++){
							var tmp = this.$data.core 
							tmp = this.$data.core;
							tmp.realid = i+"-"+ii;
							tmp.text =  "";
							tmp.color = '#ccffff';//that.RamColor();
							var str= JSON.stringify(tmp);
							raw.push(JSON.parse(str));
						}
						arr.push(raw);
					}
					this.$data.mock = arr;
					console.log(arr);
					console.log(this.$data.core)
				},
					
				add(){
					            uni.navigateTo({
					                url: '/pages/ADD/ADD',
					            })
				}
		},
		
			

	}
</script>

<style>
	.flex-item {
		width: 14%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	}

	.flex-item-V {
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	}

	.desc {
		/* text-indent: 40rpx; */
	}
	.flex-pc {
		display: flex;
		justify-content: center;
	}
</style>
